<template>
	<div class="box-main">
		<van-nav-bar @click-left="clickLeft">
			<template #left>
				<img class="left-img" src="../../assets/img/back.png" />
			</template>
			<template #title>
				<div class="pc-b2">目錄</div>
			</template>
			<template #right>
				<div class="ipad-b1">
					<van-icon name="search" />
				</div>
				<div class="pc-b1">
					<div class="d-flex pc-settings">
						<div @click="showPicker = true">设置</div>
						<img class="settings-img" src="../../assets/img/pc/settings.png" />
					</div>
				</div>
			</template>
		</van-nav-bar>
		<!-- 书籍列表 -->
		<div class="catalogue-box">
			<!-- 顶部搜索框 -->
			<div class="pc-catalogue pc-b1">
				<img src="../../assets/img/pc/mulu.png" />
			</div>
			<div class="search-box ipad-b2">
				<van-field v-model="value1" left-icon="" right-icon="search" placeholder="请输入你需要搜索的书名"
					@click-right-icon="onSearch" />
			</div>
			<div class="first-tab d-flex d-col-center ipad-pc-b2">
				<div>
					<van-tabs v-model:active="active" shrink background="#F3F6F7" line-height="0"
						title-active-color="#4098F9">
						<van-tab v-for="(item, index) in tabList" :title-style="{ 'font-size': '20px' }"
							:title="item.name" :key="index"></van-tab>
					</van-tabs>
				</div>
				<div class="d-flex d-row-right">
					<div class="add-tab ipad-pc-b2" @click="isDelete=!isDelete">
						<van-icon name="edit" /> <span class="color-b f16">编辑</span>
					</div>
					<div class="add-tab ipad-pc-b2" @click="addBooks">
						<van-icon name="plus" /> <span class="color-b f16">添加</span>
					</div>
				</div>
			</div>
			<div class="pc-main">
				<!-- 分类1 -->
				<div class="d-flex">
					<van-tabs v-model:active="active2" class="second-tab" scrollspy background="#F3F6F7" line-height="0"
						title-active-color="#4098F9" @click-tab="onClickTab">
						<van-tab v-for="(item, index) in secondTabList" :key="index" :name="item.name">
							<template #title>
								<div class="tab-item">
									<div>{{ item.name }}</div>
									<img class="line-img" v-if="tabSelect === item.name"
										src="../../assets/img/line.png" />
								</div>
							</template>
						</van-tab>
					</van-tabs>
					<div class="add-tab ipad-pc-b1" @click="addBooks">
						<van-icon name="plus" /> <span class="color-b">添加</span>
					</div>
				</div>
				<!-- 分类2 -->
				<div class="sort-tabs d-flex d-row-center">
					<van-tabs v-model:active="active3" type="card" background="#F3F6F7" line-height="0">
						<van-tab v-for="index in 4" :title="'分类 ' + index" :key="index">
						</van-tab>
					</van-tabs>
				</div>
				<!-- 书籍列表 -->
				<div class="book-list d-flex">
					<div class="book-list-b" v-for="(item, index) in bookListFilter" :key="item.id">
						<div v-if="item.status==0" class="book-box" :class="{ 'anima-shake': isDelete }">
							<!-- 删除按钮 -->
							<img class="off-btn" v-if="isDelete" @click="deleteBtnList(index)"
								src="../../assets/img/off-btn.png" alt="" />
							<div class="book-cont d-flex" @click="openUrl('/ExamPaper')">
								<img src="../../assets/img/book/3.jpg" />
								<div class="book-instructions">
									<div class="book-name">{{ item.title }}</div>
									<div class="ipad-pc-b1">
										<div class="book-tab color-b">{{ item.tab }}</div>
										<div class="color-h">{{ item.content }}</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 书单 -->
						<div class="book-box" v-else-if="item.status==1" @click="booksShow = true;smBookList=item.list">
							<!-- 删除按钮 -->
							<img class="off-btn" v-if="isDelete" @click="deleteBtnList(index)"
								src="../../assets/img/off-btn.png" alt="" />
							<div class="book-assemble d-flex">
								<div class="book-a-cover" v-for="sub in item.list">
									<img src="../../assets/img/book/2.jpg" />
								</div>
							</div>
							<div class="book-name ipad-pc-b2">{{ item.title }}</div>
						</div>
						<!-- 真题作文 -->
						<div class="book-box" v-else @click="booksShow = true;smBookList=item.list">
							<!-- 删除按钮 -->
							<img class="off-btn" v-if="isDelete" @click="deleteBtnList(index)"
								src="../../assets/img/off-btn.png" alt="" />
							<div class="book-cont d-flex">
								<div class="book-cover">
									<img src="../../assets/img/book/4.jpg" />
									<div class="book-shadow1"></div>
									<div class="book-shadow1 book-shadow2"></div>
								</div>
								<div class="book-instructions">
									<div class="book-name">{{ item.title }}</div>
									<div class="ipad-pc-b1">
										<div class="book-tab color-b">{{ item.tab }}</div>
										<div class="color-h">{{ item.content }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出书单 -->
		<div class="ipad-pc-b2">
			<transition name="zoom">
				<div class="books-list-back" v-if="booksShow" @click.stop="booksOff">
					<div class="books-list-show" @click.stop="">
						<input type="text" value="书单1" class="books-show-tit" />
						<div class="books-show-box d-flex d-row-center">
							<div class="img-box" :class="{ 'anima-shake': isDelete }"
								v-for="(item, index) in smBookList" :key="index">
								<img class="off-btn" v-if="isDelete" @click.stop="deleteBtnList2(index)"
									src="../../assets/img/off-btn.png" alt="" />
								<div @click="openUrl('/ExamPaper')">
									<img src="../../assets/img/book/1.jpg" />
									<div>{{ item.title }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
		<van-popup v-model:show="showPicker" round position="right">
			<settings></settings>
		</van-popup>
	</div>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import Settings from "@/components/Settings.vue";
	const showPicker = ref(false);
	const router = useRouter();
	const isDelete = ref(false);
	const booksShow = ref(false);
	const value1 = ref("");
	const active = ref();
	const active2 = ref();
	const active3 = ref();

	const clickShow = ref(false)
	// 书单弹出列表
	const smBookList = ref([]);
	// 书籍列表
	const bookList = ref([{
			title: "奧朵母知識",
			tab: "國中",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國中",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國中",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "奧朵母知識",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 0,
		},
		{
			title: "书单1",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 1,
			list: [{
				title: "书单1-1",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单1-2",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单1-3",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单1-4",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, ]
		},
		{
			title: "书单2",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 1,
			list: [{
				title: "书单2-1",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单2-2",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单2-3",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "书单2-4",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, ]
		},
		{
			title: "真题作文",
			tab: "國小",
			content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
			status: 2,
			list: [{
				title: "真题作文1",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "真题作文2",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "真题作文3",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, {
				title: "真题作文4",
				tab: "國小",
				content: "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
				status: 2,
			}, ]
		},
	]);

	const bookListFilter = computed(() => {
		return bookList.value.filter(v => {
			return (v.tab == tabSelect.value || tabSelect.value == '全部') && v.title.indexOf(value1
				.value) != -1
		})
	})

	// 分类
	const tabList = ref([{
			id: 0,
			name: "书架",
		},
		{
			id: 1,
			name: "书单",
		},
	]);

	// 分类1
	const tabSelect = ref('全部');
	const secondTabList = ref([{
			id: 0,
			name: "全部",
		},
		{
			id: 1,
			name: "國小",
		},
		{
			id: 2,
			name: "國中",
		},
		{
			id: 3,
			name: "高中",
		},
	]);
	// 切换分类
	const onClickTab = (data) => {
		console.log(data);
		tabSelect.value = data.name;
	};



	const longPressTimer = ref(0);
	const longPressY = ref(0)
	const booksOff = (event) => {
		event.stopPropagation();
		booksShow.value = false
	}
	const startLongPress = (e) => {
		// if (e.touches) {
		// 	longPressY.value = e.touches[0].clientY
		// }

		// longPressTimer.value = setTimeout(() => {
		// 	longPressTimer.value = 0
		// 	clickShow.value = false
		// 在这里执行长按时的操作
		// isDelete.value = true;
		// }, 1000); 
	};
	const endLongPress = (e) => {
		// clearTimeout(longPressTimer.value);
		// if (e.changedTouches) {
		// 	if (longPressTimer.value > 30 && (Math.abs(longPressY.value - e.changedTouches[0].clientY) < 30)) {
		// 		openUrl('/ExamPaper')
		// 	}
		// } else {
		// 	if (longPressTimer.value > 30) {
		// 		openUrl('/ExamPaper')
		// 	}
		// }

	};
	const deleteBtnList = (i) => {
		bookList.value.splice(i, 1);
		isDelete.value = false;
	};
	const deleteBtnList2 = (i) => {
		smBookList.value.splice(i, 1);
		isDelete.value = false;
	};
	const booksShowBtns = (event) => {
		event.stopPropagation();
	};
	const addBooks = () => {
		console.log("添加");
		router.push("/addBooks");
	};

	const onSearch = () => {
		console.log("搜索");
	};
	const clickLeft = () => {
		// router.back();
		router.push("/");
	};
	const openUrl = (url) => {
		// router.back();
		router.push(url);
	};
</script>

<style lang="scss" scoped>
	.books-list-back {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.books-list-show {
		width: 200px;
		padding: 7px 10px;
		position: fixed;
		z-index: 1000;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		background-color: rgba(235, 235, 235, 0.75);
		/* background: red; */
		border-radius: 8px;
		transition: transform 0.5s ease;

		/* 添加过渡效果 */
		.books-show-tit {
			width: 130px;
			margin: 0 auto 12px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: #e0e0e0;
			border-radius: 8px 8px 8px 8px;
			color: #7c7c7c;
			border: 0;
			display: block;
		}

		.books-show-box {
			flex-wrap: wrap;
			margin-right: -10px;

			.img-box {
				width: 65px;
				height: 116px;
				margin-right: 10px;
				margin-bottom: 36px;
				position: relative;

				.off-btn {
					position: absolute;
					top: -8px;
					right: -8px;
					width: 16px;
					height: 16px;
				}

				&:nth-child(even) {
					margin-right: 0px;
				}

				div {
					margin-top: 8px;
				}

				img {
					width: 100%;
					height: 90px;
				}
			}
		}
	}

	.catalogue-box {
		.pc-catalogue {
			width: 118px;
			height: 52px;
			margin: 20px auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.search-box {
			width: 327px;
			margin: 0 auto;
			padding-top: 4px;
		}

		.first-tab {
			padding: 8px 0;
			border-bottom: 1px solid #e7ecf3;
		}

		.add-tab {
			margin-left: 15px;
			width: 60px;
		}

		.second-tab {
			width: 100%;
			overflow: hidden;

			.tab-item {
				position: relative;

				.line-img {
					position: absolute;
					bottom: -8px;
					right: 0;
					width: 29px;
					height: 7px;
				}
			}
		}

		.sort-tabs {
			margin-top: 15px;
		}

		.book-list {
			flex-wrap: wrap;
			margin-right: -10px;
			position: relative;

			.book-list-b {
				width: 33.33333%;

				/*平板竖屏*/
				@media screen and (min-width: 800px) {
					width: auto;
				}
			}

			.book-box {
				width: 100px;
				margin-right: 10px;
				margin-top: 24px;
				position: relative;
				flex-direction: column;
				transition: 0.3s ease;

				.book-shadow1 {
					width: 100%;
					height: 100%;
					position: absolute;
					top: -4px;
					right: -4px;
					z-index: -1;
					background: #e9e9e9;

					&.book-shadow2 {
						top: -6px;
						right: -6px;
						z-index: -2;
						background: #d9d9d9;
					}
				}

				.book-assemble {
					padding: 8px;
					height: 146px;
					width: 100px;
					margin-right: -4px;
					background: #eeeeee;
					border-radius: 4px;
					flex-wrap: wrap;
					align-items: flex-start;
					overflow: hidden;

					.book-a-cover {
						width: calc(50% - 4px);
						height: 62px;
						margin-right: 4px;
						margin-bottom: 8px;
						position: relative;
						z-index: 9;

						&:last-child {
							margin-right: 0px;
						}

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.off-btn {
					position: absolute;
					top: -8px;
					right: -8px;
					width: 16px;
					height: 16px;
				}

				.book-cont {
					display: block;

					.book-cover {
						width: 100px;
						height: 146px;
						position: relative;
						z-index: 9;
					}
				}

				img {
					width: 100px;
					height: 146px;
				}

				.book-name {
					margin-top: 8px;
				}

				.book-tab {
					width: 50px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					background: rgba(64, 152, 249, 0.1);
					border-radius: 4px;
					margin: 8px 0;
				}

				/*平板竖屏*/
				@media screen and (min-width: 800px) {
					width: 371px;
					padding: 32px;
					height: 215px;
					background: #ffffff;
					box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
					border-radius: 8px 8px 8px 8px;
					align-items: flex-start;

					.book-assemble {
						width: 100%;
						padding: 0;
						background: #ffffff;
						flex-wrap: wrap;
						align-items: flex-start;
						overflow: visible;

						.book-a-cover {
							width: calc(25% - 12px);
							margin-top: -20px;
							height: 90px;
							margin-right: 12px;
							margin-bottom: 34px;
							position: relative;
							z-index: 9;

							&:last-child {
								margin-right: 0px;
							}

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.book-instructions {
						margin-left: 16px;
					}

					.book-cont {
						display: flex;
						align-items: flex-start;
					}

					&:last-child {
						/* //margin-top: 20px; */
						margin-left: 0px;
					}
				}
			}
		}
	}
</style>